Hook的用法是從React v16.8版本引入的一個功能,它允許讓我們在function cpmponent中使用狀態管理和生命週期的方法,在React中通常是use
開頭都稱作Hook(例如:useState,useEffect,useReducer)React有提供自己的Hook,我們也可以自行創建Hook。
使用 class component 時要重複使用狀態的邏輯會變得很複雜,一般做法會是用 higher-order components 或 render props 的方式進行,這樣的做法往往會需要重構元件,也有可能造成 Wrapper Hell,讓之後為維護上變得困難。
React Hook 出現則是來改善這個狀況,它允許元件之間重複使用相同邏輯,代表我們不用再對元件進行複雜的重構,即可使用重複使用相同邏輯的狀態
如果將邏輯封裝在自定義 Hook 中也代表著當需要修改這段邏輯時,只需在一個地方進行修改,而不需要在多個元件中逐一修改
在Hook出現之前,使用 class component 很常會讓邏輯變得複雜難以管理,如果在同一個元件內有多種邏輯,例如事件、資料獲取,它們可能會同時存在同一個生命週期裡(componentDidMount),將會變得難以理解。
Hook出現後,它提供了解決方案是將邏輯依照功能進行程式碼組織,而不是以生命週期,在Hook的使用下,我們可以將(事件、資料獲取)用兩個useEffect進行管理,透過模塊化的方式來簡化元件的結構。
除了React本身提供的Hook方法,我們也可以自行定義符合需求的Hook
Hook 的廣泛應用和社群的力量,有了許多第三方庫和資源可供選擇,從基本的狀態管理和表單處理到更專業的功能,如圖形處理或動畫等,由於社群的活躍,這些 Hook 通常會被持續更新和改進,代表我們可以利用最理想的方式和功能。
例如:React-Hook-Form
map
、if...else
、for...loop
等用來保存元件的狀態和改變狀態
語法
const [state, setState] = useState(initialState);
state:是當前的狀態值
setState: 呼叫setState來改變狀態
initialState: 初始狀態
元件每次渲染時,useState 都會返回一個包含兩個元素的陣列,第一個元素是當前狀態的值,第二個元素是一個用來更新該狀態的函數。
它可以讓我們在元件中操作副作用,例如(拿api資料、手動修改DOM以及清除副作用)
基本用法
useEffect(() => {
// 這裡的程式碼會在元件渲染後執行
return () => {
// 這裡的程式碼會在元件卸載或下一次 useEffect 前執行
};
}, [dependencies]);
用在重新渲染之間,緩存計算結果的方法
當我們有一些計算並且不希望它在每次渲染時都執行時,可以使用 useMemo 來記住該計算的結果,直到其依賴的某些值發生變化為止。
基本用法
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
參考文章
React Hooks 是什麼?能吃嗎?
React Hooks 是什麼?
useMemo